<template>
	<div style="height: 100%;overflow-y: auto;overflow-x: hidden;">

		<div style="padding: 10px;border-radius: 8px;background: #fff;">
			<div class="displayFlexBet mb10">
				<div class="displayFlex">
					<div style="color:#000;font-size:18px;width:198px">巡检台账</div>
					<div class="date-item displayFlex" style="margin-left: 20px;">
						<el-date-picker v-model="params2.recordDate" type="month" placeholder="选择日期" format="yyyy-MM"
							style="border-radius: 40px;width: 120px;text-align: center;" :clearable="false"
							value-format="yyyy-MM" @change="countGasMonthInspect">
						</el-date-picker>
						<i class="el-icon-arrow-down" style="margin-bottom: 6px;color: #999;"></i>
					</div>
				</div>

				<div class="displayFlex">
					<div class="displayFlex mr20">
						<div class="mr10">正常</div>
						<div style="width: 24px;height: 24px;background: #CCDDEF;border-radius: 12px;"></div>
					</div>
					<div class="displayFlex mr20">
						<div class="mr10">异常</div>
						<div style="width: 24px;height: 24px;background: #F5DCA0;border-radius: 12px;"></div>
					</div>
					<div class="displayFlex mr20">
						<div class="mr10">不生产</div>
						<div style="width: 24px;height: 24px;background: #F2F2F2;border-radius: 12px;"></div>
					</div>
				</div>
			</div>

			<div style="padding: 10px;border-radius: 16px;background: #fff;margin-bottom: 10px;">
				<div v-for="(item,index) in dataList2" :key="index" class="mb10">
					<div class="mr20 mb10">{{item.outletName}}</div>
					<div class="displayFlex"
						style="width: 100%;flex-wrap: wrap;padding:10px 20px;border: 1px solid#EDECF1;border-radius: 20px;">
						<div v-for="(item2,index2) in item.list" :key="index2">
							<div
								:style="{'background':item2.background,'borderTopLeftRadius':index2 == 0?'12px':'0','borderBottomLeftRadius':index2 == 0?'12px':'0',
							'borderTopRightRadius':index2 == item.list.length - 1?'12px':'0','borderBottomRightRadius':index2 == item.list.length - 1?'12px':'0'}"
								style="width: 36px;text-align: center;padding: 5px 0;position: relative;"
								@click="showDayInspectModal(item, item2)" class="point">
								<div v-if="item2.result == 'NO_INSPECT'" style="position: absolute;left: 2px;top: 5px;"
									class="u-type-info">——</div>
								<span>{{item2.recordDateStr.split("日")[0]}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div style="padding: 10px;border-radius: 8px;background: #fff;" class="displayFlexBet mt10 mb10">
			<div class="displayFlex">
				<div class="date-item displayFlex">
					<el-date-picker v-model="params.recordDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
						style="border-radius: 40px;width: 120px;text-align: center;" :clearable="false"
						value-format="yyyy-MM-dd" @change="getWholeProductionEquipmentDateStandingBookList">
					</el-date-picker>
					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>
			</div>

			<el-button type="primary" icon="el-icon-download" size="small" @click="exportExcle">
				导出台账
			</el-button>
		</div>

		<div class="displayFlex bra8 bgfff mb10" style="line-height:37px;padding:0 40px">
			<div class="tableItem" style="width: 10%;">排口</div>
			<div class="tableItem ml10" style="width: 15%;">设备名称</div>
			<div class="tableItem ml10" style="width: 15%;">巡检要素</div>
			<div class="tableItem ml10" style="width: 10%;">巡检结果</div>
			<div class="tableItem ml10" style="width: 10%;">问题说明</div>
			<div class="tableItem ml10" style="width: 10%;">处理结果</div>
			<div class="tableItem ml10" style="width: 20%;">巡检记录</div>
			<div class="tableItem ml10" style="width: 10%;">问题工单</div>
		</div>

		<div style="height: calc(100% - 80px)">
			<div style="height: calc(100% - 20px);overflow-y:auto">
				<el-empty v-if="tableData.length == 0" />
				<div v-for="(item,index) in tableData" :key="index" class="displayFlex bgfff bra8 mb10 font13"
					style="padding:10px 40px;align-items: stretch;color:#555">
					<div style="border-right: 1px solid#ddd;width: 20%;color:#555;" class="textOver font15">
						{{item.outletName}}
					</div>

					<div style="width: 15%;border-right: 1px solid#ddd;" class="ml10">
						<div v-for="(item1,index1) in item.detList" :key="index1">
							<div v-for="(item2,index2) in item1.defenceList" :key="index2" class="tableItem font13 mb10">
								{{item2.defenceName}}
							</div>
						</div>
					</div>
					<div style="width: 15%;border-right: 1px solid#ddd;" class="ml10">
						<div v-for="(item1,index1) in item.detList" :key="index1">
							<div v-for="(item2,index2) in item1.defenceList" :key="index2">
								<div v-for="(item3,index3) in item2.termList" :key="index3" class="tableItem font13 mb10">
									{{item3.termName}}
								</div>
							</div>
						</div>
					</div>
					<div style="width: 10%;border-right: 1px solid#ddd;" class="ml10">
						<div v-for="(item1,index1) in item.detList" :key="index1">
							<div v-for="(item2,index2) in item1.defenceList" :key="index2">
								<div v-for="(item3,index3) in item2.termList" :key="index3" class="tableItem font13 mb10">
									<span v-if="item3.result == '正常'">{{item3.result}}</span>
									<span v-else-if="item3.result == '异常'" style="color: #F32E00;">{{item3.result}}</span>
									<span v-else>{{item3.result || ''}}</span>
								</div>
							</div>
						</div>
					</div>
					<div style="width: 10%;border-right: 1px solid#ddd;" class="ml10">
						<div v-for="(item1,index1) in item.detList" :key="index1">
							<div v-for="(item2,index2) in item1.defenceList" :key="index2" class="tableItem">
								{{item2.problemContent || ''}}
							</div>
						</div>
					</div>
					<div style="width: 10%;border-right: 1px solid#ddd;" class="ml10">
						<div v-for="(item1,index1) in item.detList" :key="index1">
							<div v-for="(item2,index2) in item1.defenceList" :key="index2" class="tableItem">
								{{item2.solvedResult}}
							</div>
						</div>
					</div>
					<div style="width: 20%;border-right: 1px solid#ddd;" class="ml10">
						<div v-for="(item1,index1) in item.detList" :key="index1" class="tableItem point"
							@click="showXunJianRecord(item,item1)" style="overflow-y: auto;overflow-x: hidden;">
							<div>{{item1.inspectByName}}
								{{item1.actualExecuteTimeStr}}
							</div>
							<div>{{item1.inspectReceiptNo}}</div>
						</div>
					</div>
					<div style="width: 10%;">
						<div v-for="(item1,index1) in item.detList" :key="index1" class="tableItem"
							style="overflow-y: auto;overflow-x: hidden;">
							{{item1.problemOrderReceiptNo}}
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 巡检记录弹窗 -->
		<xunjianHis ref="xunjianHis" :outletId="xunjianParams.outletId"></xunjianHis>
		<!-- 巡检任务弹窗 -->
		<el-dialog :visible.sync="inspectTaskDialog" :title="`DA001废气排口巡检 (${currentInspectDate}巡检任务)`" append-to-body
			width="70%">
			<div style="display: flex; justify-content: center; margin-top: 100px; margin-bottom: 100px;">
				<el-button type="primary" class="mr20" @click="startInspect">开始巡检</el-button>
				<el-button type="info" @click="cancelInspect">停产，不做巡检</el-button>
			</div>
		</el-dialog>
		<!-- 设备巡检弹窗 -->
		<device-inspect-form ref="deviceInspectForm" :outletName="currentOutletName" :recordDate="currentInspectDate"
			@submit="handleInspectionSubmit" :recordDateTime="currentItem.recordDate" :outletId="xunjianParams.outletId"></device-inspect-form>
	</div>
</template>

<script>
	import moment from 'moment'
	import SnowflakeId from "snowflake-id";
	import xunjianHis from '@/components/wasteGas/xunjianHis'
	import deviceInspectForm from '@/components/wasteGas/deviceInspectForm'


	let spanArr = []
	let position = 0

	let that
	export default {
		components: {
			xunjianHis,
			deviceInspectForm
		},
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					outletId: '',
					defenceId: '',
					recordDate: moment().format('YYYY-MM-DD'),
				},
				params2: {
					recordDate: moment().format('YYYY-MM'),
				},
				xunjianParams: {},
				loading: false,
				outletList: [],
				defenceList: [],
				tableData: [],
				monthDate: "",
				dataList2: [],
				inspectTaskDialog: false,
				currentInspectDate: '',
				currentOutlet: null,
				currentItem: {},
				currentOutletName: ''
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.ajax({
				url: '/gasInspect/getLatestTime',
				data: JSON.stringify({}),
				contentType: 'application/json',
				success: function(result) {
					that.params.recordDate = result.data
					that.params2.recordDate = result.data
					that.getGasOutletBaseList()
					that.countGasMonthInspect()
				},
			})
		},

		methods: {
			showXunJianRecord(item, item1) {
				that.$refs.xunjianHis.open(item.outletId, that.params.recordDate)
				//console.log(item, item1)
			},

			changeOutlet() {
				that.getDefenceListByOutletId()
			},

			// 点击日期显示巡检任务弹窗
			showDayInspectModal(outlet, item) {
				// 保存当前选中的排口和日期信息
				that.currentOutlet = outlet
				that.currentItem = item
				that.currentInspectDate = item.recordDateStr
				that.currentOutletName = outlet.outletName
				// 显示第一个弹窗 - 巡检任务确认
				that.inspectTaskDialog = true
			},

			// 开始巡检，显示第二个弹窗
			startInspect() {
				that.inspectTaskDialog = false
				// 延迟一下确保第一个弹窗完全关闭
				setTimeout(() => {
					that.$refs.deviceInspectForm.open(that.currentOutlet.outletId, {
						date: that.currentItem.fullDateStr,
						inspectLineId: that.currentItem.inspectLineId ||
							'024691c9ce51473f9411b3b76967965f' // 添加巡检线路ID
					})
				}, 300)
			},

			// 取消巡检
			cancelInspect() {
				that.inspectTaskDialog = false
			},

			// 处理巡检提交
			handleInspectionSubmit(formData) {
				console.log('巡检数据已提交', formData)
				// 更新巡检状态或其他操作
				that.$message.success('巡检已完成')
				that.countGasMonthInspect() // 刷新月度巡检数据
			},

			countGasMonthInspect() {
				that.ajax({
					url: '/inspect/countGasMonthInspect',
					data: JSON.stringify({
						recordDate: that.params2.recordDate + "-01" // 月度时间
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								for (let index2 in item.list) {
									let item2 = item.list[index2]
									item2.isStart = false
									item2.isEnd = false

									if (index2 == 0) {
										item2.isStart = true
									} else if (index2 == item.list.length - 1) {
										item2.isEnd = true
									} else {
										if (item2.result != item.list[index2 - 1].result) {
											item2.isEnd = true
										}
										if (item.list[index2 + 1] && item2.result != item.list[index2 + 1]
											.result) {
											item2.isStart = true
										}
									}

									if (item2.result == 'NOT_PRODUCE') item2.background = "#F2F2F2"
									if (item2.result == 'ABNORMAL') item2.background = "#F5DCA0"
									if (item2.result == 'NORMAL') item2.background = "#CCDDEF"
								}
							}
							that.dataList2 = result.data
							//that.outletList = result.data
						}
					},
				})
			},

			getGasOutletBaseList() {
				that.ajax({
					url: '/gasOutlet/getGasOutletBaseList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.outletList = result.data
							that.params.outletId = that.getQueryString("outletId")

							that.getDefenceListByOutletId()
						}
					},
				})
			},

			getDefenceListByOutletId() {
				that.ajax({
					url: '/gasOutletLine/getDefenceListByOutletId',
					data: {
						outletId: that.params.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.params.defenceId = result.data.length > 0 ? result.data[0].defenceId : ''
							that.defenceList = result.data
							that.getWholeProductionEquipmentDateStandingBookList()
						}
					},
				})
			},

			//导出危废台账
			exportExcle() {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				//let appPath = "http://192.168.0.105:8081/"
				let appPath = "https://www.weifeibangbang.com/"
				window.open(appPath + '/inspect/createGasStandingBook?recordDate=' +
					that.params.recordDate + '&ticketId=' + that.params.ticketId)
				loading.close();
			},

			getWholeProductionEquipmentDateStandingBookList() {
				//if (!that.params.defenceId) return that.$message.error("请选择防治设施")
				that.ajax({
					url: '/inspect/getGasStandingBook?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						recordDate: that.params.recordDate // 月度时间
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							/*for (let item of result.data) {
								item.startTimeStr = item.startTimeStr.split(" ")[0]
								item.endTimeStr = item.endTimeStr.split(" ")[0]
							}*/
							// let newData = []
							// for (let key1 in result.data) {
							// 	let item1 = result.data[key1]
							// 	item1.megNum1 = item1.detList.length
							// 	for (let key2 in item1.detList) {
							// 		let item2 = item1.detList[key2]
							// 		item2.megNum2 = item2.defenceList.length
							// 		for (let key3 in item2.defenceList) {
							// 			let item3 = item2.defenceList[key3]
							// 			//if (key3 != 0) delete item3.defenceName
							// 			item3.megNum3 = item3.termList.length
							// 			for (let key4 in item3.termList) {
							// 				let item4 = item3.termList[key4]
							// 				console.log(key2, key3, key4)
							// 				if (key2 == 0 && key3 == 0 && key4 == 0) {
							// 					console.log(item1.megNum1, item2.megNum2, item3.megNum3)
							// 					item1.megNum = item1.megNum1 + item2.megNum2 + item3.megNum3
							// 				} else {
							// 					delete item1.outletName
							// 					delete item1.megNum
							// 				}
							// 				console.log(item1.megNum)
							// 				newData.push(Object.assign({}, item1, item2, item3, item4))
							// 			}
							// 		}
							// 	}
							// }
							that.tableData = result.data
							//that.mergeTable(['gasOutletName', 'equipmentModel', 'equipmentNo'], that.tableData)

							//console.log(spanArr)
							//console.log(that.tableData)
						}
					},
				})
			},


			//当前列column、当前行号row
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				let columnArrayIndex = [10, 11, 12, 13, 18, 19, 20, 21, 22, 23]
				position += 1
				//console.log(rowIndex, columnIndex)
				if (columnArrayIndex.indexOf(columnIndex) == -1) { //第一列
					if (rowIndex % spanArr[rowIndex] === 0) {
						return {
							rowspan: spanArr[rowIndex],
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			},


			// handleData(data) {
			// 	let newData = []
			// 	for (let key in data) {
			// 		let maxKey = 0
			// 		let item = data[key]

			// 		for (let item2 of item.materialList) {
			// 			item2.m_qty = item.qty
			// 			item2.m_fullDateStr = item.fullDateStr
			// 		}

			// 		item.materialList = item.materialList || []
			// 		item.pollutionList = item.pollutionList || []
			// 		item.sideProductList = item.sideProductList || []
			// 		item.parameterList = item.parameterList || []
			// 		// if (item.materialList.length == 0) item.materialList = [{}]
			// 		// if (item.parameterList.length == 0) item.parameterList = [{}]
			// 		maxKey = item.materialList.length
			// 		if (item.pollutionList.length > maxKey) maxKey = item.pollutionList.length
			// 		if (item.sideProductList.length > maxKey) maxKey = item.sideProductList.length
			// 		if (item.parameterList.length > maxKey) maxKey = item.parameterList.length

			// 		if (maxKey == 0) {
			// 			newData.push(JSON.parse(JSON.stringify(item)))
			// 			spanArr.push(-1)
			// 		} else {
			// 			for (let i = 0; i < maxKey; i++) {
			// 				let newObj = JSON.parse(JSON.stringify(item))
			// 				if (item.materialList[i]) newObj = Object.assign({}, newObj, item.materialList[i])
			// 				if (item.pollutionList[i]) newObj = Object.assign({}, newObj, item.pollutionList[i])
			// 				if (item.sideProductList[i]) newObj = Object.assign({}, newObj, item.sideProductList[i])
			// 				if (item.parameterList[i]) newObj = Object.assign({}, newObj, item.parameterList[i])
			// 				newData.push(newObj)
			// 				spanArr.push(maxKey)
			// 			}
			// 		}
			// 	}
			// 	return newData
			// }

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: 30px !important;
		padding: 0 2px 3px !important;
		font-size: 10px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #333 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 16px !important;

	}

	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	table,
	td {
		border: 1px solid #ebeef5;
		color: #555;
		border-collapse: collapse;
		/* 移除单元格之间的间隔 */
		padding: 10px 0;
		font-size: 12px;
		text-align: center;
	}

	table,
	th {
		border: unset;
		border-collapse: collapse;
		/* 移除单元格之间的间隔 */
		background: #F5F7FA;
		padding: 10px 0;
		font-size: 14px;
	}

	.tableItem {
		/* border-bottom: 1px solid#ddd;
		border-right: 1px solid#ddd;
		line-height: 30px;
		height: 30px;
		text-align: center;
		padding: 0 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis; */
	}
</style>